<!--
 * @Author:
 * @Date: 2022-11-24 13:56:00
 * @LastEditors:
 * @LastEditTime: 2023-04-07 13:48:50
 * @FilePath: \immoka-admin\src\views\dataPanel\flowStatistics\index.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name} , All Rights Reserved.
-->
<template>
  <el-card class="m-4 p-2">
    <div slot="header" class="flex items-center justify-between">
      <div class="flex items-center ">
        <div>
          <el-radio-group v-model="activeName" class="mr-4">
            <el-radio-button label="ROOM">房间流水统计</el-radio-button>
            <el-radio-button label="MALL">商城流水统计</el-radio-button>
          </el-radio-group>

          <el-button type="text">单位 （M豆）</el-button>
        </div>
        <p class="text-xs text-gray-500">该页面数据每5分钟更新一次</p>
      </div>

      <el-button type="text" @click="handleRefresh"
      ><i class="el-icon-refresh-right"></i> 刷新
      </el-button
      >
    </div>

    <Mall v-show="activeName === LABEL_NAME.MALL" ref="mall"/>
    <Room v-show="activeName === LABEL_NAME.ROOM" ref="room"/>
  </el-card>
</template>

<script>
import Room from '@/views/dataPanel/flowStatistics/components/Room'
import Mall from '@/views/dataPanel/flowStatistics/components/Mall'

import { refresh } from '@/api/dataPanel/financial'

const LABEL_NAME = {
  ROOM: 'ROOM',
  MALL: 'MALL'
}

export default {
  components: {
    Room,
    Mall
  },
  data() {
    return {
      LABEL_NAME,
      activeName: LABEL_NAME.ROOM
    }
  },
  computed: {
    room() {
      return this.$refs['room']
    },
    mall() {
      return this.$refs['mall']
    }
  },
  methods: {
    async handleRefresh() {
      try {
        await refresh()
        if (this.activeName === LABEL_NAME.ROOM) {
          await this.room.initData()
          this.$message.success('刷新成功！')
        } else {
          this.mall.initData()
        }
      } catch (e) {
        this.$message.error('刷新失败！')
      }
    }
  }
}
</script>
